<template>
  <div id="app">
    <div v-if="pageIndex ===1">
      <div style="text-align: left;">
        <span>工作标签:   </span>
        <el-tag style="left: 20px"
                v-for="tag in tags"
                @click.native="myLabel(tag.name)"
                :key="tag.name"
                :type="tag.type">
          {{ tag.name }}
        </el-tag>
      </div>
      <div style="margin-top: 20px;">
        <el-table v-loading="listLoading"
                  :data="result.list"
                  border
                  :header-cell-style="headClass"
                  :cell-style="rowClass"
                  style="width: 100%">
          <el-table-column
              prop="jobName"
              label="工作名称"
              width="180">
          </el-table-column>
          <el-table-column
              prop="salary"
              label="工资待遇"
              width="180">
          </el-table-column>
          <el-table-column
              prop="degree"
              label="学历要求"
              width="180">
            <template slot-scope="scope">
              <div v-if="scope.row.degree===0">
                <span>初中</span>
              </div>
              <div v-if="scope.row.degree===1">
                <span>高中</span>
              </div>
              <div v-if="scope.row.degree===2">
                <span>本科</span>
              </div>
              <div v-if="scope.row.degree===3">
                <span>研究生</span>
              </div>
              <div v-if="scope.row.degree===4">
                <span>博士</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
              prop="jobTypeName"
              label="工作类型"
              width="180">
          </el-table-column>
          <el-table-column
              prop="label"
              label="工作标签"
              width="180">
          </el-table-column>
          <el-table-column
              prop="city"
              label="工作地点"
              width="180">
          </el-table-column>
          <el-table-column
              label="操作">
            <template slot-scope='scope'>
              <el-button type="primary" size="mini" @click="myRemark(scope.row.jobId)">评论情况</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 底栏容器 -->
        <el-footer style="text-align: left;">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryParam.pageNum"
              :page-sizes="[10,20,30,40,50,100,200,500,1000]"
              :page-size="queryParam.pageSize"
              :layout="queryParam.isCount ? 'total, sizes, prev, pager, next, jumper' : 'sizes, prev, next'"
              :total="result.totalNum">
          </el-pagination>
        </el-footer>
      </div>
    </div>
    <div v-if="pageIndex ===2">
      <el-row style="text-align: left">
        <el-col :span="24">
          <el-button size="medium"
                     type="success"
                     @click="changePageIndex(1)">返回
          </el-button>
        </el-col>
      </el-row>
      <el-table v-loading="listLoading"
                :data="remarks.list"
                border
                :header-cell-style="headClass"
                :cell-style="rowClass"
                style="width: 100%;margin-top: 20px;">
        <el-table-column
            prop="jobName"
            label="工作名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="companyName"
            label="企业名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="seekerName"
            label="求职者名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="message"
            label="评论内容"
            width="250">
        </el-table-column>
        <el-table-column
            prop="createdTime"
            label="创建时间"
            width="180">
          <template slot-scope="scope">
            <span>{{ dateFormat(scope.row.createdTime) }}<br></span>
          </template>
        </el-table-column>
      </el-table>
      <el-footer style="text-align: left;">
        <el-pagination
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            :current-page="queryParam.pageNum"
            :page-sizes="[10,20,30,40,50,100,200,500,1000]"
            :page-size="queryParam2.pageSize"
            :layout="queryParam2.isCount ? 'total, sizes, prev, pager, next, jumper' : 'sizes, prev, next'"
            :total="remarks.totalNum">
        </el-pagination>
      </el-footer>
    </div>
  </div>
</template>

<script>


import jwtUtil from "jwt-decode";
import {getCompanyJobs, getCompanyJobsLabel, getReadRemarks} from "@/api";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "comRemarks",
  data() {
    return {
      pageIndex: 1,
      user: {
        userId: '',
        objectId: '',
        userType: ''
      },
      listLoading: false,
      queryParam: {
        pageNum: 1,
        pageSize: 10,
        isCount: true,
        companyId: ''
      },
      result: {
        list: [],
        totalNum: -1
      },
      tags: [],
      queryParam2: {
        pageNum: 1,
        pageSize: 10,
        isCount: true,
        jobId: ''
      },
      remarks: {
        list: [],
        totalNum: -1
      }
    }

  },
  methods: {
    headClass() {
      return "text-align:center"
    },
    rowClass() {
      return "text-align:center"
    },
    handleSizeChange(val) {
      this.queryParam.pageSize = val
      this.myList()
    },
    handleCurrentChange(val) {
      this.queryParam.pageNum = val
      this.myList()
    },
    handleSizeChange2(val) {
      this.queryParam.pageSize = val
      this.myRemark()
    },
    handleCurrentChange2(val) {
      this.queryParam.pageNum = val
      this.myRemark()
    },
    changePageIndex(pageIndex) {
      this.pageIndex = pageIndex;
    },
    dateFormat(it) {
      let date = new Date(it * 1000)
      return (
          date.getFullYear() +
          '年' +
          (date.getMonth() + 1) +
          '月' +
          date.getDate() +
          '日'
      );
    },
    //方法
    myList() {
      this.listLoading = true
      this.queryParam.companyId = this.$route.query.id
      getCompanyJobs(this.queryParam).then(res => {
        this.result.list = res.data.list
        this.result.totalNum = res.data.totalNum
        this.listLoading = false
      })
    },
    myLabel(item) {
      if (item === '全部') {
        this.queryParam.label = null
      } else {
        this.queryParam.label = item
      }
      this.myList()
    },
    myRemark(item){
      this.pageIndex = 2
      this.queryParam2.jobId=item
      this.listLoading = true
      getReadRemarks(this.queryParam2).then(res => {
        this.remarks.list = res.data.list
        this.remarks.totalNum = res.data.totalNum
        this.listLoading = false
      })
    }
  },
  created() {
    this.user = jwtUtil(window.localStorage.getItem('Token'))
    getCompanyJobsLabel(this.$route.query.id).then(res => {
      this.tags = []
      this.tags.push({name: '全部', type: ''})
      res.data.list.forEach(it => {
        if (it !== '') {
          this.tags.push({name: it, type: ''})
        }
      })
    })
    this.myList()
  }
}
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}

.el-form-css .el-input, .el-select {
  width: 300px;
}
</style>